<template>
  <view class="address_page_add">
    <u-navbar
      title="添加收货地址"
      :autoBack="true"
      bgColor="#fff"
      height="88rpx"
      leftIconSize="34"
      placeholder
    ></u-navbar>
    <view class="container">
      <Card style="padding: 30rpx">
        <view class="address_box" @click="show = true">
          <text class="title">选择地区</text>
          <text class="fu">省/市/区</text>
          <u-icon name="arrow-right" size="30"></u-icon>
        </view>
      </Card>
      <Card style="padding: 30rpx">
        <view class="address_info_box">
          <view class="info_item">
            <text class="title">收件人</text>
            <view class="input_view">
              <up-input placeholder="请输入收件人" border="none"></up-input>
            </view>
          </view>
          <view class="info_item">
            <text class="title">手机号</text>
            <view class="input_view">
              <up-input placeholder="请输入手机号" border="none"></up-input>
            </view>
          </view>
          <view class="info_item">
            <text class="title">详细地址</text>
            <view class="input_view">
              <up-input placeholder="请输入详细地址" border="none"></up-input>
            </view>
          </view>
        </view>
      </Card>
    </view>
    <u-picker
      :show="show"
      :columns="columns"
      itemHeight="80"
      keyName="name"
      @change="onChange"
      @cancel="show = false"
      @confirm="onConfirm"
      @close="onClose"
    ></u-picker>
  </view>
</template>

<script setup>
import { ref, reactive } from "vue";
import Card from "@/component/Card.vue";
import CityCode from "@/util/pca-code.json";
const show = ref(false);
console.log(CityCode);
const columns = ref([]);
let originData = []; //只存储 二级 三级联动的数据

function initData() {
  const result = [];
  const result2 = [];
  const result3 = [];
  CityCode.forEach((item) => {
    result.push({
      code: item.code,
      name: item.name,
    });
  });
  const city1 = CityCode[0];
  if (Array.isArray(city1.children)) {
    city1.children.forEach((item2) => {
      result2.push({
        code: item2.code,
        name: item2.name,
      });
    });
    const city2 = city1.children[0];
    if (Array.isArray(city2.children)) {
      city2.children.forEach((item3) => {
        result3.push({
          code: item3.code,
          name: item3.name,
        });
      });
    }
  }
  columns.value = [result, result2, result3];
  let a1 = [];
  let a2 = [];
  let a3 = [];
  CityCode.forEach((item) => {
    a1.push({
      code: item.code,
      name: item.name,
    });
    if (Array.isArray(item.children)) {
      const result = [];
      const result1 = [];
      item.children.forEach((item2) => {
        result.push({
          code: item2.code,
          name: item2.name,
        });
        if (Array.isArray(item2.children)) {
          const result2 = [];
          item2.children.forEach((item3) => {
            result2.push({
              code: item3.code,
              name: item3.name,
            });
          });
          result1.push(result2);
        }
      });
      a2.push(result);
      a3.push(result1);
    }
  });
  originData = [a2, a3];
}
initData();
console.log(originData);

function onChange(e) {
  const { indexs } = e;
  const [provinceIndex, cityIndex, areaIndex] = indexs; //对应三级
  const cityData = originData[0]; //城市数据
  const areaData = originData[1]; //地区数据
  const cityActionData = cityData[provinceIndex];
  const areaActionData = areaData[provinceIndex][cityIndex];

  if (cityActionData) {
    columns.value[1] = cityActionData;
  } else {
    columns.value[1] = [];
  }

  if (areaActionData) {
    columns.value[2] = areaActionData;
  } else {
    columns.value[2] = [];
  }
}

function onConfirm(data) {
  const { value } = data;
  console.log(value);
  show.value = false;
}
function onClose() {
  show.value = false;
}
</script>

<style lang="scss" scoped>
.address_page_add {
  min-height: 100%;
  background-color: #f8fafb;
  .container {
    padding: 20rpx 30rpx;
    .address_info_box {
      .info_item {
        margin-bottom: 38rpx;
        &:last-child {
          margin: 0;
        }
        .input_view {
          padding: 20rpx 40rpx;
          background-color: #f6f6f7;
          border-radius: 10px;
          margin-top: 10rpx;
        }
      }
      .title {
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 33rpx;
      }
    }
    .address_box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
      .fu {
        font-weight: 500;
        font-size: 28rpx;
        color: #acacac;
        margin-left: 10rpx;
        margin-right: auto;
      }
    }
  }
}
</style>
